import { createBrowserRouter } from "react-router-dom";
import AuthRoute from "@/components/AuthRoute";

import { lazy, Suspense } from "react";
import Layout from "@/pages/Layout";

const Home = lazy(() => import("@/pages/Home"));
const Login = lazy(() => import("@/pages/Login"));
const Publish = lazy(() => import("@/pages/Publish"));
const Article = lazy(() => import("@/pages/Article"));
const router = createBrowserRouter([
  {
    path: "/login",
    element: (
      <Suspense
        fallback={
          <>
            <span>loading.......</span>
          </>
        }
      >
        <Login></Login>
      </Suspense>
    ),
  },
  {
    path: "/",
    element: (
      <Suspense fallback={"loading......."}>
        <AuthRoute>
          <Layout></Layout>
        </AuthRoute>
      </Suspense>
    ),
    children: [
      {
        index: true,
        element: (
          <Suspense fallback={"loading......."}>
            <Home></Home>
          </Suspense>
        ),
      },
      {
        path: "article",
        element: (
          <Suspense fallback={"loading......."}>
            <Article></Article>
          </Suspense>
        ),
      },
      {
        path: "publish/:id?",
        element: (
          <Suspense fallback={"loading......."}>
            <Publish></Publish>
          </Suspense>
        ),
      },
    ],
  },
]);

export default router;
